<template>
  <main class="mainContainer">
    <div
      class="job"
      v-for="(item, index) in student"
      :key="item.id"
      :class="curStudentIndex == index ? `active` : ``"
      @click="handleClick(index, $event, item.username, item)"
    >
      <van-row align="center">
        <van-col span="14">
          <div class="profile">
            <div class="info">
              <div class="name">{{ item.username }}</div>
              <div class="grade">{{ classFormat[item.class] }}</div>
            </div>
            <div class="time">会员有效期：{{ item.createtime }}</div>
          </div>
        </van-col>
        <van-col span="9">
          <div v-if="curStudentIndex == index" style="{width:100%}">
            <van-row justify="space-around">
              <!-- <van-icon name="edit" @click="edit(item)">编辑</van-icon>
              <van-icon name="delete" @click="del(item)">删除</van-icon> -->
              </van-row
            >
          </div>
          <div v-else>
            <van-row justify="space-around">
              <van-icon name="edit" color="#999999">编辑</van-icon>
              <van-icon name="delete" color="#999999">删除</van-icon></van-row
            >
          </div>
        </van-col>
      </van-row>
    </div>
    <br /><br />
    <van-button type="primary" size="large" round @click="handleConfirm" text="确定" />
  </main>
</template>

<script setup>
import { useUserInfoStore } from '@/stores/user.js'  // 导入名为useUserInfoStore的函数，从'@/stores/user.js'文件中
import { storeToRefs } from 'pinia'  // 导入名为storeToRefs的函数，从'pinia'库中
import { closeToast, showConfirmDialog, showLoadingToast, showToast } from 'vant'  // 导入名为closeToast、showConfirmDialog、showLoadingToast和showToast的函数，从'vant'库中
import { useRouter } from 'vue-router'  // 导入名为useRouter的函数，从'vue-router'库中
import { loginDel } from '../api'  // 导入名为loginDel的函数，从'../api'文件中

const userInfoStore = useUserInfoStore()  // 调用useUserInfoStore函数，将返回值赋给userInfoStore变量
const { curStudentIndex, student, classFormat } =
  storeToRefs(userInfoStore)  // 使用storeToRefs函数处理userInfoStore，并将结果解构赋值给curStudentIndex、student和classFormat变量
const router = useRouter()  // 调用useRouter函数，将返回值赋给router变量

// 点击事件处理函数
async function handleClick(index, e, name) {
  if (e.target.className.includes(`van-icon-edit`)) {
    router.push({ path: '/editStudentProfile', query: { index } })  // 如果点击的元素包含类名'van-icon-edit'，则跳转到'/editStudentProfile'页面，并传递index参数
    return
  }
  if (e.target.className.includes(`van-icon-delete`)) {
    showConfirmDialog({
      title: '删除提示',
      message: `确认删除学员 ${name} 的档案吗？`,
      async confirm() {
        //删除
        showLoadingToast({
          message: '删除中...',
          forbidClick: true
        })
        await loginDel()  // 调用loginDel函数进行删除操作
        closeToast()
        showToast(`删除成功`)  // 显示一个弹框提示删除成功
      }
    })
    return
  }

  userInfoStore.setCurStudentIndex(index)  // 调用setCurStudentIndex方法设置curStudentIndex的值为index
}

// 确认事件处理函数，点击后返回上一页
async function handleConfirm() {
  router.back()  // 返回上一页
}

</script>

<style scoped lang="less">
@var1: #f5f6f8;
@var2: #4ec183;
@var3: #ffffff;
@var4: #ffc456;
@var5: #999999;

.mainContainer {
	background-color: @var1;
	min-height: 100vh;
}
.profile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 3.5rem;
	box-sizing: border-box;
	padding-left: 1.5rem;
	.info {
		display: flex;
		align-items: center;
		.name {
			font-weight: bold;
			font-size: 17px;
		}
		.grade {
			font-size: 13px;
			background-color: @var2;
			display: grid;
			place-content: center;
			padding: 2px 0.5rem;
			border-radius: 10px;
			margin-left: 2rem;
			color: @var3;
		}
	}
	.time {
		font-size: 13px;
		font-weight: bold;
	}
}
.job {
	background-color: @var3;
	width: 100%;
	border-radius: 15px;
	padding: 0.7rem 0;
	margin-bottom: 1rem;
	&.active {
		background-color: @var4;
		color: @var3;
	}
	&:not(.active) .profile .time {
		color: @var5;
	}
}

</style>
